<template>
  <div class="app-container">
    <el-card shadow="never" class="mainCard" v-loading="loading">
      <div style="width: 100%; height: 40px;">
        <el-button type="warning" size="small" link style="float: right; margin-left: 10px;" @click="reback()">返
          回</el-button>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleTabsClick">
          <el-tab-pane label="供者信息" name="first">
            <el-descriptions title="供者信息">
              <el-descriptions-item label="姓名">{{ checkedData.name }}</el-descriptions-item>
              <el-descriptions-item label="昵称">{{ checkedData.nickName }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ checkedData.sex == 0 ? '女' : '男' }}</el-descriptions-item>
              <el-descriptions-item label="生日">{{ checkedData.birthday }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ checkedData.phone }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="供者问卷信息" :column="1">
              <el-descriptions-item v-for="item in answerJsonList" :key="item.key" :label="item.key">
                {{ item.val }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="体检信息" name="third">
            <el-table v-loading="loading" :data="checkupList" highlight-current-row border>
              <el-table-column label="序号" width="55" prop="dataIndex" />
              <el-table-column label="体检编号" prop="number" />
              <el-table-column label="创建时间" prop="createTimeText" />
              <el-table-column label="更新时间" prop="updateTimeText" />
              <el-table-column fixed="right" label="操作" min-width="280" width="280">
                <template #default="scope">
                  <el-button type="primary" size="small" link @click="viewReport(scope.row.id)"><i
                      class="el-icon-view"></i>
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="float: right;margin-top:  20px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="打卡信息" name="third2">

            <el-table v-loading="loading" :data="signInList" highlight-current-row border>
              <el-table-column label="序号" width="55" prop="dataIndex" />
              <el-table-column label="打卡时间" prop="createTimeText" />
              <el-table-column label="早餐图片" prop="bImgNum">
                <template #default="scope">
                  <template v-if="scope.row.bImgNum == 0">-</template>
                  <template v-else>
                    <a href="javascript:;" @click="openSignInDetail(scope.row, 'B')">{{ scope.row.bImgNum }} 张</a>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="午餐图片" prop="lImgNum">
                <template #default="scope">
                  <template v-if="scope.row.lImgNum == 0">-</template>
                  <template v-else>
                    <a href="javascript:;" @click="openSignInDetail(scope.row, 'L')">{{ scope.row.lImgNum }} 张</a>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="晚餐图片" prop="dImgNum">
                <template #default="scope">
                  <template v-if="scope.row.dImgNum == 0">-</template>
                  <template v-else>
                    <a href="javascript:;" @click="openSignInDetail(scope.row, 'D')">{{ scope.row.dImgNum }} 张</a>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="粪便图片" prop="fImgNum">
                <template #default="scope">
                  <template v-if="scope.row.fImgNum == 0">-</template>
                  <template v-else>
                    <a href="javascript:;" @click="openSignInDetail(scope.row, 'F')">{{ scope.row.fImgNum }} 张</a>
                  </template>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="float: right;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>

          </el-tab-pane>
          <el-tab-pane label="捐献样本" name="second">
            <el-table v-loading="loading" :data="fmtSampleList" highlight-current-row border>
              <el-table-column label="序号" width="55" prop="dataIndex" />
              <el-table-column label="样本编号" prop="number" />
              <el-table-column label="样本状态" prop="statusText" />
              <el-table-column label="创建时间" prop="createTimeText" />
              <el-table-column label="更新时间" prop="updateTimeText" />
              <el-table-column fixed="right" label="操作" min-width="120" width="130">
                <template #default="scope">
                  <!-- <el-button type="primary" size="small" link @click="rendQrCode(scope.row)"><i class="el-icon-edit-outline"></i> 生成码内容</el-button> -->
                  <el-button type="warning" size="small" link @click="openQrCodeDialog(scope.row)"
                    :disabled="!scope.row.htmlName"><i class="el-icon-view"></i> 查看二维码</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="block" style="float: right;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>

          </el-tab-pane>

        </el-tabs>
      </div>
    </el-card>


    <el-dialog :visible.sync="qrCodeInfoVisible" title="查看二维码" width="400px" :before-close="closeQrCodeDialog">
      <div>
        <p>供者名称：{{ checkedData.name }}</p>
        <img :src="qrCodeUrl" />
      </div>
    </el-dialog>

    <!-- 体检信息 查看 -->
    <el-dialog :visible.sync="checkupVisible" title="查看体检单" width="1200px" :close-on-click-modal="false">
      <div v-if="checkupListData.length == 0" style="text-align: center;">
        <p style="font-size: 20px;">暂无数据</p>
      </div>
      <template v-if="checkupListData.length > 0">
        <div v-for="(item, index) in checkupListData" :key="index">
          <div style="margin-bottom: 10px;">
            <p>{{ item.itemType }}</p>
          </div>
          <iframe :src="htmlPdUrl[index]" frameborder="0" height="570px" width="100%" class="iframe"></iframe>
        </div>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="showSignInDialog" title="打卡照片查看" width="600px" style="height: 500px;" :close-on-click-modal="false">
      <template v-for="item in showSignInImgUrlList">
        <el-image :key="item.url"
          style="width: 200px; height: 200px"
          :src="item.url" 
          :preview-src-list="item.srcList">
        </el-image>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { formatDate } from '@/utils/formatTime'
import fmtSampleApi from '@/api/aliyun/fmt/sample'
import fmtSignInApi from '@/api/aliyun/fmt/signIn'

import axios from 'axios'
export default {
  name: 'fmtUserDetailDesign',
  props: {
    checkedData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      loading: false,
      activeName: 'first',
      queryParams: {
        pageNum: 0,
        pageSize: 10,
      },
      queryParams2: {
        pageNum: 0,
        pageSize: 10,
      },
      total: 0,
      rules: {},
      statusMap: {
        CREATE: '已创建',
        TO_BE_SENT_OUT: '待寄出',
        SENT_OUT: '已寄出',
        SAMPLE_RECEIVE: '样本已收到',
        REPORT_SEQ_END: '实验室测序完成',
        DATA_ANALYSIS: '数据分析中',
        REPORT_AUDIT: '样本审核中',
        COMPLETED: '完成',
      },
      fmtSampleList: [],
      formData: {},
      qrCodeInfoVisible: false,
      qrCodeUrl: '',
      answerJsonList: [],
      checkupList: [],
      queryParams: {
        pageNum: 0,
        pageSize: 10,
      },
      checkupVisible: false,
      checkupListData: [],
      htmlPdUrl: [],
      dataCheckupId: "",

      signInList: [],
      showSignInDialog: false,
      showSignInImgUrlList: [],
      
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    openSignInDetail(row, flag) {
      this.showSignInDialog = true;
      let itemTypeMap = row.itemTypeMap;
      let dataList = [];
      this.showSignInImgUrlList = [];
      switch (flag) {
        case 'B':
          dataList = itemTypeMap['BREAKFAST'] ? itemTypeMap['BREAKFAST'] : []
          break;
        case 'L':
          dataList = itemTypeMap['LUNCH'] ? itemTypeMap['LUNCH'] : []
          break;
        case 'D':
          dataList = itemTypeMap['DINNER'] ? itemTypeMap['DINNER'] : []
          break;
        case 'F':
          dataList = itemTypeMap['FECES'] ? itemTypeMap['FECES'] : []
          break;
      }
      for (let i = 0, len = dataList.length; i < len; i++) {
        this.showSignInImgUrlList.push({
          url: dataList[i].imgUrl,
          srcList: [dataList[i].imgUrl]
        });
      }
      console.log(this.showSignInImgUrlList)
    },
    // 体检信息 查看
    viewReport(id) {
      this.checkupVisible = true;
      this.dataCheckupId = id;
      this.getReportList();

    },
    // 获取体检项列表
    getReportList() {
      fmtSampleApi.checkupList(this.dataCheckupId).then(res => {
        this.checkupListData = res.data;
        this.checkupListData = [
          {
            checkupId: null,
            createTime: 1698993924015,
            id: 6,
            imgUrl: "https://junyouoss.oss-cn-wulanchabu.aliyuncs.com/fmt/checkup/11411287680939388872.pdf",
            itemType: "新型冠状病毒抗体两项(SARS-CoV-2+IgM",
            updateTime: 1698993924015
          }
        ]
        for (let i = 0; i < this.checkupListData.length; i++) {
          axios({
            url: this.checkupListData[i].imgUrl,
            method: 'get',
            responseType: 'blob'
          }).then(r => {
            const binaryData = [];
            binaryData.push(r.data);
            let b = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' })) + '#toolbar=0&navpanes=0&scrollbar=0';
            this.$set(this.htmlPdUrl, i, b);
          })
        }
      })
    },
    rendQrCode(row) {
      fmtSampleApi.renderContent(row.id).then(res => {
        this.$message({ message: '二维码内容生成成功！', type: 'success' });
        this.getfmtSampleList();
      })
    },
    openQrCodeDialog(row) {
      //this.checkedBatch = row;
      fmtSampleApi.qrCode(row.id).then(res => {
        this.qrCodeInfoVisible = true;
        this.qrCodeUrl = window.URL.createObjectURL(res)
      })
    },
    closeQrCodeDialog() {
      this.qrCodeInfoVisible = false;
    },
    init() {
      switch (this.activeName) {
        case 'first':
          let surveyAnswerJson = this.checkedData.surveyAnswerJson;
          if (surveyAnswerJson) {
            let dataJson = JSON.parse(surveyAnswerJson);
            for (let k in dataJson) {
              this.answerJsonList.push({
                key: k,
                val: dataJson[k]
              })
            }
          }
          break;
        case 'second':
          this.getFmtSampleList();
          break;
        case 'third':
          this.getCheckupData();
          break;
        case 'third2':
          this.getSignInList()
          break;
      }
    },
    getSignInList() {
      this.signInList = [];
      this.loading = true;
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        fmtDonorId: this.checkedData.id
      };
      fmtSignInApi.page(params).then(res => {
        let data = res.data;
        let index = 1
        data.content.forEach((v) => {
          v.dataIndex = index++;
          v.createTimeText = formatDate(new Date(v.createTime), "YYYY-mm-dd")
          v.updateTimeText = formatDate(new Date(v.updateTime), "YYYY-mm-dd HH:MM:SS")
          v.bImgNum = v.itemTypeMap['BREAKFAST'] ? v.itemTypeMap['BREAKFAST'].length : 0
          v.lImgNum = v.itemTypeMap['LUNCH'] ? v.itemTypeMap['LUNCH'].length : 0
          v.dImgNum = v.itemTypeMap['DINNER'] ? v.itemTypeMap['DINNER'].length : 0
          v.fImgNum = v.itemTypeMap['FECES'] ? v.itemTypeMap['FECES'].length : 0
        });
        this.signInList = data.content;

        this.total = data.count;
        this.loading = false;
      })
    },
    // 体检信息数据
    getCheckupData() {
      this.loading = true;
      let searchFormData = [{
        name: 'sampleType',
        searchType: 'EQUAL',
        searchVal: 'CHECK_UP'
      }, {
        name: 'fmtUserId',
        searchType: 'EQUAL',
        searchVal: this.checkedData.id
      }];
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        criteriaVos: searchFormData,
        fmtDonorId: this.checkedData.id
      };
      fmtSampleApi.pageCheckupList(params).then((res) => {
        this.loading = false;
        let data = res.data;
        let index = 1
        data.content.forEach((v) => {
          v.dataIndex = index++;
          v.createTimeText = formatDate(new Date(v.createTime), "YYYY-mm-dd HH:MM:SS")
          v.updateTimeText = formatDate(new Date(v.updateTime), "YYYY-mm-dd HH:MM:SS")
        });
        this.checkupList = data.content;

        this.total = data.count;
      }).catch(() => { this.loading = false; });
    },
    getFmtSampleList() {
      this.loading = true;
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        statuses: (this.queryParams.status == '' || this.queryParams.status == null) ? [] : [this.queryParams.status],
        sampleNumber: this.queryParams.sampleNumber,
        fmtDonorId: this.checkedData.id
      };
      fmtSampleApi.page(params).then((res) => {
        let data = res.data;
        let index = 1
        data.content.forEach((v) => {
          v.createTimeText = formatDate(new Date(v.createTime), "YYYY-mm-dd HH:MM:SS")
          v.updateTimeText = formatDate(new Date(v.updateTime), "YYYY-mm-dd HH:MM:SS")
          v.statusText = this.statusMap[v.status];
          v.dataIndex = index++;
        });
        this.fmtSampleList = data.content;

        this.total = data.count;
        this.loading = false;
      }).catch(() => { });
    },
    handleTabsClick(tab, event) {
      this.init()
    },
    reback() {
      this.$emit("close");
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getFmtSampleList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getFmtSampleList();
    },
  }
}
</script>